import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import {
    AuthorsWrapper,
    AuthorTitle,
    AuthorSwitch,
    AuthorContentList,
    AuthorItem,
    AuthorImage,
    AuthorName,
    AuthorLike,
    Attention,
    CheckMoreItem
} from '../style' 

class RecommendAuthors extends PureComponent{
   render() {
     const  { list } = this.props;
     return (
         <AuthorsWrapper>
            <AuthorTitle>
                推荐作者
                <AuthorSwitch><i className="iconfont authorSpin">&#xe852;</i> 换一换</AuthorSwitch> 
            </AuthorTitle>
            <AuthorContentList>
                {
                    list.map((item) => {
                        return (
                            <AuthorItem key={item.get('id')}>
                                <AuthorImage>
                                    <img alt="" className="authorImg" src={item.get('imgUrl')} />
                                </AuthorImage>
                                <Attention>+ 关注</Attention> 
                                <AuthorName>{item.get('authorsName')}</AuthorName>
                                <AuthorLike>写了{item.get('writtingLength')}的字 - {item.get('like')}人喜欢</AuthorLike>
                            </AuthorItem>
                        )
                    })
                }   
                <CheckMoreItem>查看更多<i className="iconfont">&#xe770;</i></CheckMoreItem>            
            </AuthorContentList>

         </AuthorsWrapper>
     )
   }
}

const mapState = (state) => ({
    list: state.getIn(['home', 'authorsList'])
})

const mapDispatch = (dispatch) => ({

})

export default connect(mapState, mapDispatch)(RecommendAuthors);